<template>
	<view class="study-video" v-if="JSON.stringify(studyPlanOne)!='{}'">
		<bsNavBar :title='studyPlanOne.className'></bsNavBar>
		<u-sticky :offset-top='navHeight'>
			<view class="bg-fff my-height">
				<video id="myVideo" v-if="studyPlanOne.videoUrl" @loadedmetadata='loadedmetadata' @timeupdate='timeupdate' @ended='ended'
				 :title='studyPlanOne.className' :initial-time='initialTime' class="my-video" :src="studyPlanOne.videoUrl" controls></video>
				<view class="bg-fff">
					<view class="title plr">
						{{studyPlanOne.className}}
					</view>
					<bs-gap top="40" bottom="0"></bs-gap>
					<u-tabs active-color='#0050A5' inactive-color='#9A9A9A' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
			</view>
		</u-sticky>
		<view class="plr">
			<view class="schedule-time" v-if="studyPlanOne.status==2">
				当前课程已学习{{(yetTime/60).toFixed(1)}}分钟，学习满{{studyPlanOne.passingTime}}分钟可完成本节课学习。
			</view>
			<view class="schedule-time schedule-active" v-else>
				当前课程已学习完成,可重复观看
			</view>
			<view id="studyList">
				<title title="学习进度" :showLine='true' :lineShow='true'></title>
				<studyList :list='studyPlanList' @handStudy='handStudy'></studyList>
			</view>
			<view class="mt-80" id="introduce">
				<bsTileRich title='课程介绍' :content='courseIntroduction'>
				</bsTileRich>
			</view>
			<view class="mt-80" id="centent">
				<bsTileRich title='课件内容' :content='studyPlanOne.classIntroduction'>
				</bsTileRich>
			</view>
			<view class="mt-80" id="note">
				<bsTileRich title='课堂笔记' :content='studyPlanOne.classNotes'>
				</bsTileRich>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/components/bs-title/bs-title.vue'
	import studyList from '@/components/bs-study-list/bs-study-list.vue'
	import bsTileRich from '@/components/bs-title-rich/bs-title-rich.vue'
	import {
		domScroll
	} from "@/utils/tools.js"
	export default {
		components: {
			studyList,
			title,
			bsTileRich
		},
		data() {
			return {
				initialTime: 0, //指定播放位置
				list: [{
					name: '学习进度'
				}, {
					name: '课程介绍'
				}, {
					name: '课件内容'
				}, {
					name: '课堂笔记'
				}],
				current: 0,
				navHeight: this.CustomBar * 2,
				courseId: '',
				studyPlanList: [],
				studyPlanOne: {},
				classId: '',
				courseIntroduction: '',
				videoContext: null,
				isTime: true,
				yetTime: 0
			};
		},
		onReady: function(res) {
			//获取视频对象
			this.videoContext = uni.createVideoContext('myVideo')

		},
		async onLoad(e) {
			this.courseId = e.courseId //课程id
			this.classId = e.classId //某一节id
			this.courseIntroduction = e.courseIntroduction //课程介绍
			await this.getStudyPlan()
			await this.getStudyOne()
			this.yetTime = uni.getStorageSync('detail')
		},
		methods: {
			//视频播放事件-sta
			ended() { //播放完毕
				if (this.studyPlanOne.status == 2) {
					uni.setStorageSync('detail', 0)
					return
				}
			},
			async timeupdate(data) { //播放中
				// this.$u.throttle(() => {
				// 	console.log('防抖')
				// }, 3000)
				if (!this.isTime) {
					this.isTime = true
					return
				}
				if (this.studyPlanOne.status == 2 && this.isTime) {
					console.log(this.studyPlanOne.status, '&&', this.isTime)
					let passingTime = this.studyPlanOne.passingTime * 60
					let detail = parseInt(data.detail.currentTime)
					uni.setStorageSync('detail', detail)
					//状态为2 正在学习
					if (detail >= passingTime) {
						//解锁
						this.studyPlanOne.status = 3
						this.$u.api.completeCourseProgress({
							courseId: this.courseId
						})
						uni.removeStorageSync('detail')
						await this.init()
						uni.showToast({
							title: '解锁成功!'
						})
					}
				}



			},
			loadedmetadata(data) {
				console.log(this.studyPlanOne.status, '加载视频完毕??', uni.getStorageSync('detail'))
				let duration = data.detail.duration
				let detail = uni.getStorageSync('detail')
				if (this.studyPlanOne.status == 3) {
					this.initialTime = 0
					this.videoContext.seek(this.initialTime)
					return
				}
				//如果缓存中的时长大于等于当前视频的时长
				if (detail >= duration) {
					this.initialTime = 0
					this.videoContext.seek(this.initialTime)
					return
				}
				if (detail) {
					this.initialTime = detail
					//需要调用修改视频的方法,直接修改不生效
					this.videoContext.seek(this.initialTime)
				}
			},
			//视频播放事件-end
			async getStudyPlan() {
				//查询学习进度
				let studyPlan = await this.$u.api.findCourseProgressList({
					courseId: this.courseId
				})
				this.studyPlanList = studyPlan
				console.log(this.studyPlanList, '学习进度')
			},
			async getStudyOne() {
				//查询单个课程
				let studyPlanOne = await this.$u.api.findClassTableOne({
					classId: this.classId
				})
				this.studyPlanOne = studyPlanOne
				//给每个课程添加一个状态(是否是学习和解锁,未解锁)
				this.studyPlanList.forEach((item) => {
					if (item.classId == this.studyPlanOne.classId) {
						this.$set(this.studyPlanOne, 'status', item.status)
					}
				})
				console.log(this.studyPlanOne, '单个课程')
			},
			async init() {
				await this.getStudyPlan()
				await this.getStudyOne()
			},
			async handStudy(item) {
				this.classId = item.classId
				this.isTime = false
				switch (item.status) {
					case 1: //解锁课程
						uni.showModal({
							confirmText: '确定解锁',
							content: '是否解锁',
							title: '解锁课程',
							success: async (res) => {
								if (res.confirm) {
									let res = await this.$u.api.unlockCourseProgress({
										courseId: this.courseId,
									});
									uni.showToast({
										title: '解锁成功',
										incon: 'none'
									})
									await this.getStudyPlan()
									console.log(res)
								}
							}
						})

						break
					case 2: //立即学习
						this.yetTime = uni.getStorageSync('detail')
						await this.init()
						break
					case 3:
						await this.init()
						break
					default:
						break
				}

			},
			//点击切换
			change(index) {
				let idArr = ['#studyList', '#introduce', '#centent', '#note']
				var _this = this;
				//切换 页面滚动到指定位置
				let info = uni.createSelectorQuery().select(".my-height");
				domScroll(idArr, index, this.navHeight, this, info)
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study-video {
		padding-bottom: 180rpx;

		.title {
			color: #312D2D;
			font-size: 38rpx;
			padding-top: 40rpx;
			background-color: #fff;
		}

		.schedule-time {
			padding: 20rpx 30rpx;
			background-color: #FFECEC;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #D71A1A;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}

		.schedule-active {
			background-color: #19be6e;
			color: #fff;
		}

		.my-video {
			width: 100%;
			height: 420rpx;
		}
	}
</style>
